import { REG_EXP } from '@/constants'
import { useRequest } from 'ahooks'
import { Form, Input, Modal } from 'antd'
import { bindingUser } from '../services'

export interface BindingModalProps {
  open?: boolean
  onCancel?: (refresh: boolean) => void
}

const BindingModal: React.FC<BindingModalProps> = props => {
  const [form] = Form.useForm()
  const { runAsync, loading } = useRequest(bindingUser, {manual: true})
  
  const onCancel = (refresh: boolean) => {
    props.onCancel?.(refresh)
    form.resetFields()
  }

  const onOk = () => {
    form.validateFields()
    .then((values: any) => {
      return runAsync({
        telephone: values.telephone,
        status: 1,
      })
    })
    .then(() => {
      onCancel(true)
    })
  }

  return (
    <Modal
      title='绑定用户'
      open={props.open}
      onCancel={() => onCancel(false)}
      onOk={onOk}
      confirmLoading={loading}
      okText='绑定'
      destroyOnClose
    >
      <Form form={form}>
        <Form.Item label='用户手机号' name='telephone' rules={[
          {required: true, message: '请输入手机号'},
          {pattern: REG_EXP.PHONE, message: '请输入正确的手机号'},
        ]}>
          <Input placeholder='请输入' allowClear />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default BindingModal
